/*
 * @Author: 何善万 swhe@che300.com
 * @Date: 2023-11-06 10:34:55
 * @LastEditors: 何善万 swhe@che300.com
 * @LastEditTime: 2025-01-14 09:59:52
 * @FilePath: \my-notion-redux\src\routers.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from "react";
import JobSection0 from "./components/job_section_0";
import { useDispatch, useSelector, connect } from "react-redux";
import { setGlobalCommon } from "../../redux/slices/global";
import { setCommon } from "./slices";
import { debounce } from "lodash";

import JobSection1 from "./components/job_section_1";
import JobSection2 from "./components/job_section_2";
import JobSection3 from "./components/job_section_3";
import JobSection4 from "./components/job_section_4";
import JobSection5 from "./components/job_section_5";
import JobSection6 from "./components/job_section_6";
import JobSection7 from "./components/job_section_7";
import JobSection8 from "./components/job_section_8";
import Menu from "./components/menu";

import * as styles from "./styles/index.less";
import * as commonStyles from "@/index.less";
import classNames from "classnames";

class JobIndx extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page_index: 0,
      sectionDomArr: []
    };
    this.touchStart_x = 0;
    this.touchStart_y = 0;
  }

  componentDidMount() {
    // 获得所有的简历卡片
    let sectionDomArr = document.querySelectorAll(".section");
    sectionDomArr.forEach((item, index) => {
      item.setAttribute("data-index", index);
      item.setAttribute("active", index === 0);
    });
    this.setState({
      sectionDomArr,
    }, () => this.props.dispatch(setCommon({
      sectionDomArr
    })));

    document.addEventListener('touchstart', this.handleTouchStart);
    document.addEventListener('touchend', this.handleTouchEnd)
  }

  componentWillUnmount(){
    document.removeEventListener('touchstart', this.handleTouchStart);
    document.removeEventListener('touchend', this.handleTouchEnd)
  }

  // 滑动结束
  handleTouchEnd = (event) => {
    let { clientX, clientY } = event.changedTouches[0];
    if (clientY - this.touchStart_y > 30 ) {
      this.handleChangePage('pre')
    } else if(clientY - this.touchStart_y  < -30) {
      this.handleChangePage('next')
    }
  }

  // 滑动开始
  handleTouchStart = (e) => {
    this.touchStart_x = e.touches[0].clientX;
    this.touchStart_y = e.touches[0].clientY;
  }

/**
 * 切换页面
 * @param {*} type 上一张下一张
 * @returns 
 */
  handleChangePage = (type) => {
    // 拿到切换页面的索引
    const { page_index, sectionDomArr } = this.state;
    let index = page_index;
    if (type === "pre") {
      if (page_index === 0) return;
      index = page_index - 1;
    } else {
      if (page_index === sectionDomArr.length - 1) return;
      index = page_index + 1;
    }

    this.setState(
      {
        page_index: type === "pre" ? page_index - 1 : page_index + 1,
      },
      () => {
        const { page_index: next_page_index } = this.state;
        this.props.dispatch(setCommon({ page_index: next_page_index }))

        sectionDomArr.forEach((item, index) => {
          item.setAttribute("active", next_page_index ===index);
        });

        let target = sectionDomArr[next_page_index];
        target.scrollIntoView({
          behavior: "smooth",
          inline: "nearest",
        });
      }
    );
  };


  handleOpenMenu = () => {
    const { dispatch } = this.props;
    
    dispatch(setGlobalCommon({ isShowMenu: true }));
  }

  render() {
    const { page_index, sectionDomArr } = this.state;
    return (
      <div className={styles.job_pages}>
        {/* 上下切换按钮 */}
        <div className={styles.dir_icon}>
            <div className={styles.pre_div}>
              {
                page_index !== 0 && (
                  <i
                  className={classNames(commonStyles.iconfont, styles.pre_icon)}
                  onClick={debounce((e) => {
                    e.stopPropagation();
                    this.handleChangePage("pre")
                  }, 500, {
                    leading: true,
                    trailing: false,
                  })}
                >
                  &#xe600;
                </i>
                )
              }
            </div>
           
          <div>
          {page_index !== sectionDomArr.length - 1 && (
            <i
              className={classNames(commonStyles.iconfont, styles.next_icon)}
              onClick={debounce(() => this.handleChangePage("next"), 500, {
                leading: true,
                trailing: false,
              })}
            >
              &#xe600;
            </i>
          )}
          </div>
        </div>

        <i
              className={classNames(commonStyles.iconfont, styles.menu_icon)}
              onClick={() => this.handleOpenMenu()}
            >
              &#xe61e;
          </i>
        <Menu />
        <JobSection0 />
        <JobSection1 />
        <JobSection2 />
        <JobSection3 />
        <JobSection4 />
        <JobSection5 />
        <JobSection6 />
        <JobSection7 />
        <JobSection8 />
      </div>
    );
  }
}

export default connect()(JobIndx) ;
